
//导航
$(".list1").hover(function(){
    $(this).find("div").css({display:"block"})
    $(this).find(".on").hide().next().show()

},
function(){
    $(this).find("div").css({display:"none"})
    $(this).find(".on").show().next().hide()
}
)


//swiper  

//生成图片
$(".swiper-slide").append($("<img src=''></img>"))
$(".swiper-slide>img").each(function(index){
  this.src=lunBoList[index].url
})

//轮播y
var mySwiper = new Swiper ('.swiper-container', {
    // direction: 'vertical', // 垂直切换选项
    // loop: true, // 循环模式选项
    effect : 'fade',
    // 如果需要分页器
    // autoplay:true,//自动
    // 如果需要前进后退按钮
    autoplay: {
      disableOnInteraction: false,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination :{
      el: '.swiper-pagination',
      clickable :true,
      }
  }) 
  for(i=0;i<mySwiper.pagination.bullets.length;i++){
    mySwiper.pagination.bullets[i].onmouseover=function(){
      this.click();
    };
  }  


  //侧边导航
  
  $(".nav>ul>li").hover(
    function(){
      $(".ol-list").css({display:"flex",background:"skyblue",color:"white"})
      let res='';
      leftList[$(this).index()].data.forEach(function(item){
        res+=`<li><img src="${item.url}" alt="">
                  <span>${item.name}</span>
              </li>`  
      })
      $(".ol-list").html(res)
      if(leftList[$(this).index()].data.length>5){
        $(".ol-list").css({width:"500px"})
        console.log(123)
      }else{$(".ol-list").css({width:"250px"})}
    },
    function(){
      $(".ol-list").css({display:"none"})
    }
  )
  $(".ol-list").hover(function(){
    $(".ol-list").css({display:"flex"})
  },function(){
    $(".ol-list").css({display:"none"})
  })
  //生成八个数据
  setE()
  function setE(){
    let res = '';
      list.forEach(item=>{
        res+=`
        <div>
          <p class="${item.zh?'show':''}">${item.zh}</p>
          <img src="${item.url}" alt="">
          <p class="e-img-p" style="font-size: 16px;">${item.name}</p>
          <p style="font-size: 14px; color: #aaa;">${item._price}</p>
          <p style="font-size: 14px;color: red; margin-top: 5px;">${item.price}</p>
      </div>
        `
      })
      $(".eight").html(res)
  }

  
//   $(".ul1 li").click(function(){
//     fn(data[$(this).index()])
//  })

  fiveSet()
  function fiveSet(){
    let res='';
      five.forEach(item=>{
        res+=`
        <div> 
          <div class="top">
              <p class="${item.zh?'show':' '}" style="background: red; width: 60px; ">${item.zh}</p>
              <img src="${item.url}" alt="">
              <p  style="font-size: 16px;background-color: #f9f9f9; height: 40px;;margin-top: 20px; line-height: 40px;">${item.name}</p>
          </div>
          <p style="font-size: 14px; color: #aaa;">${item._price}</p>
          <p style="font-size: 14px;color: red; margin-top: 5px;">${item.price}</p>
      </div>
        `
      })
      $(".five").html(res)
  }
  //跳转登录注册
  $(".li1").click(()=>{
    window.location.href="./login.html"
  })
  
  //
  // console.log(window.localStorage.getItem("id"))
  nick()
  function nick(){
    if(window.localStorage.getItem("nickname")){
      let res=`<span style="color:red">欢迎您 ${window.localStorage.getItem("nickname")}</span>`
      $(".center ol .li1").html(res)
      $(".m-c-head .li1 .p1").html(res)
    }else{
      const res=`<span>请登录</span><span>注册</span>`
      const r=`
      <p class="p1"><span style="color: #bbb;">您好,请</span><a href="./reg.html">&nbsp;注册</a>&nbsp;/&nbsp;<a href="./login.html">登录</a></p>
      `
      $(".center>ol>.li1").html(res)
      $(".m-c-head .li1 .p1").html(r)
    }
  }  

  // $(".center li").click(function(){
  //   window.location.href="./list.html"
  // })
  $(".swiper-wrapper").click(function(){
    window.location.href="./list.html"
  })
  $("img").click(function(){
    window.location.href="./list.html"
  })